<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <!-- 引入组件库 -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <div id="app">
    <el-button type="primary" @click="submitForm">立即创建</el-button>
    <el-button @click="resetForm">重置</el-button>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="date" label="日期" width="180">
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="300">
        <template slot-scope="scope">
          <el-form :model="scope.row" :ref="'ruleFormName' +  scope.$index" class="demo-ruleForm">
            <el-form-item prop="name" :rules="[
            { required: true, message: '姓名不能为空'},
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ]">

              <el-input v-model="scope.row.name"></el-input>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="地址">
        <template slot-scope="scope">
          <el-form :model="scope.row" :ref="'ruleFormAddress' +  scope.$index" class="demo-ruleForm">
            <el-form-item prop="address" :rules="[
            { required: true, message: '地址不能为空'},
          ]">
              <el-input v-model="scope.row.address"></el-input>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>

    </el-table>
    <el-button type="primary" @click="submitForm" style="margin: 20px 0 0;">确定</el-button>
  </div>
  <script>

    var app = new Vue({
      el: '#app',
      data: {
        tableData: [
          { date: '2016-05-03', name: '111', address: '2' },
          { date: '2016-05-03', name: '222', address: '2' },
          { date: '2016-05-03', name: '', address: '' },

        ],
        bool: true,
      },
      created () {

      },
      mounted () {
        
      },
      methods: {
  
        
        async submitForm () {
          // await this.check()
          // console.log('bool: ', this.bool);

          this.check2().then(res => {
            console.log('校验通过: ');
          }).catch(err => {
            console.log('校验不通过: ');

          })
        },

        check () {
          this.bool = true
          for (let i = 0; i < this.tableData.length; i++) {
            this.$refs[`ruleFormAddress${i}`].validate().catch(err => {
              this.bool = false
            })
            this.$refs[`ruleFormName${i}`].validate().catch(err => {
              this.bool = false
            })
          }
        },


        check2 () {
          return new Promise((resolve, reject) => {
            for (let i = 0; i < this.tableData.length; i++) {
              this.$refs[`ruleFormAddress${i}`].validate().catch(err => {
                reject()
              }).then(res => {
                resolve()
              })
              this.$refs[`ruleFormName${i}`].validate().catch(err => {
                reject()
              }).then(res => {
                resolve()
              })
            }
          })
        },

        resetForm () {
          for (let i = 0; i < this.tableData.length; i++) {
            let obj = 'ruleFormAddress' + i
            let obj1 = 'ruleFormName' + i
            this.$refs[obj].resetFields();
            this.$refs[obj1].resetFields();
          }
        },

        hanldeAAA (scope) {
          console.log('scope: ', scope);
        },
      }
    })
  </script>
</body>

</html>